<template>
  <div class="forget">
    <div class="em-fg">邮箱</div>
    <!-- 控制用户名输入框的样式 -->
    <el-input 
      v-model="emailfg"
      type="email" 
      class="email-fg" 
      placeholder="请输入您的邮箱"
    />
    <div class="code-text-fg">验证码</div>
    <div class="codecontent-fg">
      <el-input 
        v-model="codefg"
        type="text" 
        class="code-fg" 
        placeholder="请输入验证码"
      />
      <button class="btcode-fg">发送验证码</button>
    </div>
    <div class="psw-fg">输入新密码</div>
    <el-input
      v-model="passwordfg"
      class="password-fg"
      type="password"
      placeholder="请输入新密码"
      show-password
    />
    <div class="psw-afg">再次输入密码</div>
    <el-input
      v-model="passwordagainfg"
      class="passwordagainfg"
      type="password"
      placeholder="再次输入密码"
      show-password
    />
    <input type="submit" value="确定" class="sb-fg" @click="$emit('switch-to-login')">
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const emailfg = ref('')
    const usernamefg = ref('')
    const passwordfg = ref('')
    const passwordagainfg = ref('')
    const codefg = ref('')
    return {
      emailfg,
      usernamefg,
      passwordfg,
      passwordagainfg,
      codefg,
    }
  }
};
</script>

<style scoped>
.forget {
  max-width: 400px;
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  background-color: #fafafb;
  border-radius: 10px;
  margin: 0 auto; 
}

.em-fg {
  font-size: 16px;
  margin-top: 50px;
}

.email-fg{
  width: 100%;
  height: 50px;
  margin-top: 10px;
  font-size: 16px;
  outline: none;
}

.code-text-fg {
  font-size: 16px;
  margin-top: 20px;
}

.codecontent-fg {
  display: flex;
  align-items: center; 
  justify-content: space-between;
  height: 50px; 
}

.code-fg {
  width: 70%;
  height: 50px; 
  margin-top: 10px;
  font-size: 16px;
  outline: none;
}

.btcode-fg {
  width: 24%;
  height: 50px; 
  font-size: 14px;
  background-color: #71c4ef;
  border: 1px solid #777777;
  border-radius: 6px;
}


.btcode-fg:hover {
  background-color: #33a6e0;
}

.psw-fg {
  font-size: 16px;
  margin-top: 20px;
}

.password-fg {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  font-size: 16px;
  outline: none;
}

.psw-afg {
  font-size: 16px;
  margin-top: 20px;
}

.passwordagainfg {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  font-size: 16px;
  outline: none;
}

.sb-fg {
  margin-top: 40px;
  padding: 10px;
  width: 100%;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.sb-fg:hover {
  background-color: #45a049;
}


@media (max-width: 600px) {
  .forget {
    padding: 20px;
    width: 90%;
    height: auto;
  }

  .email-fg,.code-fg,.password-fg,.passwordagainfg,.code-rg {
    font-size: 14px;
  }

  .btcode-rg {
    font-size: 12px;
    height: 40px;
  }

  .sb-rg {
    font-size: 16px;
  }

  .login-wel {
    font-size: 20px;
  }
}
</style>
